<template>
  <view class="container">
    <!-- 蓝色头部区域 -->
    <view class="blue-header">
      <!-- 导航栏 -->
      <view class="navbar">
        <view class="back-btn" @click="onBack">
          <uni-icons type="left" size="24" color="#ffffff"></uni-icons>
        </view>
        <view class="title">我的订单</view>
      </view>
      <view class="order-tabs">
        <view 
          class="tab-item" 
          :class="{ active: activeTab === 'all' }" 
          @click="switchTab('all')"
        >
          全部
        </view>
        <view 
          class="tab-item" 
          :class="{ active: activeTab === 'pending_pay' }" 
          @click="switchTab('pending_pay')"
        >
          待支付
        </view>
        <view 
          class="tab-item" 
          :class="{ active: activeTab === 'pending_use' }" 
          @click="switchTab('pending_use')"
        >
          待使用
        </view>
        <view 
          class="tab-item" 
          :class="{ active: activeTab === 'pending_evaluate' }" 
          @click="switchTab('pending_evaluate')"
        >
          待评价
        </view>
      </view>
    </view>
    
    <!-- 白色内容区域 -->
    <view class="white-content">
      <!-- 订单列表 -->
      <view class="order-list">
        
        <view class="order-card" v-for="(order, index) in filteredOrders" :key="index"  @click="gotoDetail(order)">
          <view class="order-header">
            <text class="order-number">订单编号: {{ order.orderNumber }}</text>
            <uni-icons type="right" size="16" color="#999999"></uni-icons>
          </view>
          
          <view class="order-body">
            <text class="service-item">服务项目: {{ order.serviceItem }}</text>
            
            <view class="store-info">
              <text class="service-store">服务门店: {{ order.storeName }}</text>
            
              <text class="order-status" :class="order.statusClass">{{ order.statusText }}</text>
            </view>
            
            <text class="order-time">下单时间: {{ order.orderTime }}</text>
          </view>
          
          <view class="order-footer">
            <text class="order-price">{{ order.priceLabel }}: {{ order.price }}</text>
            <view class="btn-group">
              <button 
                v-for="(btn, btnIndex) in order.buttons" 
                :key="btnIndex"
                :class="btn.class"
                @click="handleButtonClick(order, btn.action)"
              >
                {{ btn.text }}
              </button>
            </view>
          </view>
        </view>
        
        <!-- 空状态显示 -->
        <view class="empty-state" v-if="filteredOrders.length === 0">
          <uni-icons type="empty" size="80" color="#ccc"></uni-icons>
          <text class="empty-text">暂无{{ tabNameMap[activeTab] }}订单</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前激活的标签
      activeTab: 'all',
      // 标签名称映射，用于空状态显示
      tabNameMap: {
        all: '相关',
        pending_pay: '待支付',
        pending_use: '待使用',
        pending_evaluate: '待评价'
      },
     
      orders: [
        {
          orderNumber: '24255252522',
          serviceItem: '车辆保养',
          storeName: '大宝车辆维修店',
          status: 'pending_evaluate', // 状态标识，用于筛选
          statusText: '待评价',
          statusClass: 'blue-text',
          orderTime: '2023-03-12 12:09',
          priceLabel: '实付',
          price: '230.56元',
          buttons: [
            { text: '立即评价', class: 'gray-btn', action: 'evaluate' },
            { text: '再来一单', class: 'blue-btn', action: 'repeat' }
          ]
        },
        {
          orderNumber: '24255252523',
          serviceItem: '车辆保养',
          storeName: '大宝车辆维修店',
          status: 'cancelled', // 已取消状态
          statusText: '已取消',
          statusClass: 'gray-text',
          orderTime: '2023-03-10 09:45',
          priceLabel: '应付',
          price: '230.56元',
          buttons: [
            { text: '重新下单', class: 'blue-btn', action: 'reorder' }
          ]
        },
        {
          orderNumber: '24255252524',
          serviceItem: '车辆保养',
          storeName: '大宝车辆维修店',
          status: 'refunded', // 已退款状态
          statusText: '已退款',
          statusClass: 'gray-text',
          orderTime: '2023-03-05 15:30',
          priceLabel: '实付',
          price: '230.56元',
          buttons: [
            { text: '再来一单', class: 'blue-btn', action: 'repeat' }
          ]
        },
        {
          orderNumber: '24255252525',
          serviceItem: '车辆保养',
          storeName: '大宝车辆维修店',
          status: 'completed', // 已完成状态
          statusText: '已完成',
          statusClass: 'blue-text',
          orderTime: '2023-02-28 11:20',
          priceLabel: '实付',
          price: '230.56元',
          buttons: [
            { text: '再来一单', class: 'blue-btn', action: 'repeat' }
          ]
        },
        {
          orderNumber: '24255252526',
          serviceItem: '轮胎更换',
          storeName: '速修汽车服务站',
          status: 'pending_pay', // 待支付状态
          statusText: '待支付',
          statusClass: 'orange-text',
          orderTime: '2023-03-16 14:22',
          priceLabel: '应付',
          price: '450.00元',
          buttons: [
			   { text: '取消订单', class: 'gray-btn', action: 'cancel' },
            { text: '立即支付', class: 'blue-btn', action: 'pay' }
           
          ]
        },
        {
          orderNumber: '24255252527',
          serviceItem: '空调清洗',
          storeName: '清新汽车服务',
          status: 'pending_use', // 待使用状态
          statusText: '待使用',
          statusClass: 'green-text',
          orderTime: '2023-03-15 10:15',
          priceLabel: '实付',
          price: '180.00元',
          buttons: [
			   { text: '申请退款', class: 'gray-btn', action: 'cancel' },
            { text: '扫码结算', class: 'blue-btn', action: 'view_code' }
			
          ]
        }
      ]
    };
  },
  computed: {
    // 根据当前激活的标签筛选订单
    filteredOrders() {
      switch(this.activeTab) {
        case 'all':
          // 全部订单
          return this.orders;
        case 'pending_pay':
          // 待支付订单
          return this.orders.filter(order => order.status === 'pending_pay');
        case 'pending_use':
          // 待使用订单
          return this.orders.filter(order => order.status === 'pending_use');
        case 'pending_evaluate':
          // 待评价订单
          return this.orders.filter(order => order.status === 'pending_evaluate');
        default:
          return this.orders;
      }
    }
  },
  onLoad() {
    // 页面加载时可以从接口获取订单数据
    // this.fetchOrders()
  },
  methods: {
    onBack() {
      // 返回上一页
      uni.navigateBack({
        delta: 1
      });
    },
    gotoDetail(order) {
        uni.navigateTo({
          url: '/my-item/Order/detail?orderNumber=' + order.statusText
        });
      },
    // 切换标签
    switchTab(tab) {
      this.activeTab = tab;
      // 切换标签时滚动到顶部
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },
    
    // 处理订单按钮点击事件
    handleButtonClick(order, action) {
      console.log(`订单 ${order.orderNumber} 执行 ${action} 操作`);
      
      // 根据不同的动作执行相应的逻辑
      switch(action) {
        case 'evaluate':
          // 跳转到评价页面
          uni.navigateTo({
            url: `/pages/evaluation/evaluation?orderId=${order.orderNumber}`
          });
          break;
        case 'repeat':
        case 'reorder':
          // 跳转到下单页面
          uni.navigateTo({
            url: `/pages/order/order?service=${order.serviceItem}`
          });
          break;
        case 'pay':
          // 跳转到支付页面
          uni.navigateTo({
            url: `/pages/payment/payment?orderId=${order.orderNumber}`
          });
          break;
        case 'cancel':
          // 取消订单
          this.cancelOrder(order.orderNumber);
          break;
        case 'view_code':
          // 查看券码
          uni.navigateTo({
            url: `/pages/couponCode/couponCode?orderId=${order.orderNumber}`
          });
          break;
      }
    },
    
    // 取消订单
    cancelOrder(orderNumber) {
      uni.showModal({
        title: '提示',
        content: '确定要取消订单吗？',
        success: (res) => {
          if (res.confirm) {
            // 这里可以调用取消订单的接口
            this.orders = this.orders.map(order => {
              if (order.orderNumber === orderNumber) {
                return {
                  ...order,
                  status: 'cancelled',
                  statusText: '已取消',
                  statusClass: 'gray-text',
                  buttons: [
                    { text: '重新下单', class: 'blue-btn', action: 'reorder' }
                  ]
                };
              }
              return order;
            });
            uni.showToast({
              title: '订单已取消',
              icon: 'success'
            });
          }
        }
      });
    },
    
    // 从接口获取订单数据的示例方法
    fetchOrders() {
      // 实际项目中这里会调用接口获取数据
      // uni.request({
      //   url: '/api/orders',
      //   success: (res) => {
      //     this.orders = res.data;
      //   }
      // });
    }
  }
};
</script>

<style scoped>
.container {
  /* 页面高度占满屏幕 */
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* 蓝色头部区域 */
.blue-header {
	position: relative;
  background-color: #007AFF;
  color: white;
  padding-bottom: 150rpx;
}

/* 导航栏样式 */
.navbar {
  display: flex;
  align-items: center;
  padding: 2rpx 2rpx;
  position: relative; /* 添加相对定位 */
}

.back-btn {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 38rpx;
  font-weight: 400;
  position: absolute; /* 绝对定位 */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 调整中心点 */
}

.right-actions {
  display: flex;
  align-items: center;
}

.more-icon {
  margin-right: 30rpx;
}

/* 订单状态标签 */
.order-tabs {
  display: flex;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  font-size: 32rpx;
  position: relative;
  /* 添加点击反馈 */
  transition: all 0.3s;
  cursor: pointer;
  opacity: 0.8;
}

/* 激活状态的标签 */
.tab-item.active {
  font-weight: bold;
  opacity: 1;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 6rpx;
  background-color: white;
  border-radius: 3rpx;
}

/* 标签点击效果 */
.tab-item:active {
  opacity: 0.6;
}

/* 白色内容区域 */
.white-content {
  /* 添加以下属性 */
  position: relative;
  z-index: 10;
  
  /* 其他原有样式 */
  flex: 4;
  width: 90%;
  background-color: #f5f5f5;
  
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  margin-left: 45rpx; /* 将left改为margin-left */
  margin-top: -100rpx;
}

/* 订单列表样式 */
.order-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

/* 订单卡片样式 */
.order-card {
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}

/* 卡片点击效果 */
.order-card:active {
  transform: scale(0.99);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.order-number {
  font-size: 28rpx;
  color: #333333;
}

.order-body {
  margin-bottom: 30rpx;
}

.service-item {
  display: block;
  margin-bottom: 24rpx;
  font-size: 20rpx;
  color: #333333;
}

.store-info {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.service-store {
  font-size: 28rpx;
  color: #666666;
  flex: 1;
}

.location-icon {
  margin-right: 10rpx;
}

.order-status {
  font-size: 28rpx;
}

.blue-text {
  color: #007AFF;
}

.gray-text {
  color: #999999;
}

/* 新增状态颜色 */
.orange-text {
  color: #FF9500;
}

.green-text {
  color: #00C853;
}

.order-time {
  display: block;
  font-size: 28rpx;
  color: #666666;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20rpx;
  border-top: 2rpx solid #f5f5f5;
}

.order-price {
  font-size: 30rpx;
  
  font-weight: 500;
}

.btn-group {
  display: flex;
  gap: 20rpx;
}

button {
  padding: 12rpx 30rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  height: auto;
  line-height: normal;
  transition: opacity 0.2s;
}

/* 按钮点击效果 */
button:active {
  opacity: 0.7;
}

.gray-btn {
  background-color: rgb(191,191,191);
  color: #666666;
  border: none;
  border-radius: 16rpx;
}

.blue-btn {
  background-color: #007AFF;
  color: white;
  border: none;
  border-radius: 16rpx;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #999;
}

.empty-text {
  margin-top: 30rpx;
  font-size: 30rpx;
}
</style>
    